<template>
	<div v-loading="loading">
		<!--端口映射-->
		
		<el-alert
	    title="当该容器运行的实例需要提供外网访问时需映射端口到当前所属主机，容器端口为容器内部监听或通讯端口，宿主机端口是所属主机的 本地端口，建议使用高位端口，例如mysql容器端口3306需要提供外网访问，映射到宿主机端口为13306。"
	    type="info">
	  </el-alert>
		
		<addListTableBySlot
			ref="addListTableBySlot"
			:data="formData" :options="options" @change="changeConfig">
			
			<template slot="envNameSlot" slot-scope="{scope}">
				<el-form 
					:ref="'formRef'+ parseInt(Math.random().toFixed(10)*10000000000)" 
					:model="scope.row" 
					:rules="varsNameRules">
					<el-form-item label="" prop="varsName">
				    <el-input 
						:disabled="!!(scope.row.envCode)"
						@change="(v)=>{scope.row.varsName=v;scope._self.emitDataChange()}"
						v-model="scope.row.varsName" 
						type="text"
						></el-input>
				  </el-form-item>
				</el-form>
			</template>
			
			<template slot="defaultValueSlot" slot-scope="{scope}">
				<el-input 
					@change="(v)=>{scope.row.varsValue=scope.row.defaultValue=v;scope._self.emitDataChange()}"
					v-model="scope.row.defaultValue" 
					type="text"
					></el-input>
			</template> 
			
			<template slot="descriptionSlot" slot-scope="{scope}">
				<!-- <el-popover
					v-if="scope.row.description"
			    placement="top-start"
			    title=""
			    width="200"
			    trigger="hover"
			    :content="scope.row.description">
			    <template slot="reference">
			    	<i class="iconfont icon-wenhao"></i>
			    </template>
			  </el-popover> -->
			    	<i v-if="scope.row.description" title="scope.row.description" class="iconfont icon-wenhao"></i>

			</template>
			
		</addListTableBySlot>
		
		
	</div>
</template>

<script>
	import addListTableBySlot from "@/view/components/table/addListTableBySlot";
	import baseSelect from "@/view/components/select/select";
	import {getEnvs} from "@/service/swagger/EnvsController";
	import {refAutoValidate} from "@/utils/validate";
	
export default {
	props: [
		"readOnly", // 是否可编辑
		//"defaultValue", // 
		"deployType", 
	],
	components: {
		baseSelect,
		addListTableBySlot,
	},
	data() {
		return {
			loading : false,
			formData : [],
			
			options: {
				autoAddList : true ,
				editDisabled: false,
				header: [{
					label: "容器端口",
					propName: "envName",
					slotName:"envNameSlot",
					align: "left",
				}, {
					label: "宿主机端口",
					align: "left",
					propName: "defaultValue",
					slotName:"defaultValueSlot",
				}, {
					label: "提示",
					propName: "description",
					slotName:"descriptionSlot",
					align: "center",
				},],
				defaultNewRow: {
					defaultValue: "",
					varsValue: "",
					// description: "",
					// envCode: "PORT_MAPPING",
					// envType: "", // varsType
					// envName: "", // varsName
					varsName : "",
					varsType: "2",
					nullAble: 0,
				}
			},
			
			varsNameRules : {
				varsName : [
					{ required: true, message: '端口不能为空', trigger: 'blur' },
				]
			}
		}
	},
	mounted() {
		
	},
	methods: {
		
		init(options){
			let params = {
				deployType : options.deployType ,
				deployModel : options.deployModel,
				appType : options.appType,
			}
			getEnvs(params).then(ret=>{
				if(!ret.code){
					this.initData(ret.data)
				}
			})
			
		},
		
		initData(data){
			let arr = [];
			data.forEach(el=>{
				if(el.envType==2||el.varsType==2){
					arr.push({
						defaultValue : el.defaultValue || "",
						varsValue:  el.defaultValue || "",
						varsName : el.varsName?el.varsName:( el.envName || ""),
						envCode : el.envCode || "",
						nullAble : el.nullAble || 0,
						description : el.description || "",
						varsType: "2",
					})
				}
			})
			this.formData = arr ;
			this.$refs.addListTableBySlot.initListData(arr)
		},
		
		changeConfig(name, v) {
			console.log( "自定义 添加编辑 列表数据变更", name, v) 
			this.formData = v ;
			this.emitChange();
		}, 
		
		emitChange(){
			this.$emit("change","port", this.formData , this.deployModelList )
		},
		
		
		validateCreat(callback){
			// 此处改写 验证规则
			
			refAutoValidate(this.$refs,"formRef",callback);
		},
		
		validateDeploy(callback){
			// 为容器部署时
			if(this.deployType==1){
				// 部署时端口至少有一个
				console.log("部署时端口至少有一个",this.formData)
//				if(!this.formData||!this.formData.length){
//					this.$refs.addListTableBySlot.addTableList()
//				}
			}
			
			// 此处改写 验证规则
			
			refAutoValidate(this.$refs,"formRef",callback);
		},
		
	}

}
</script>

<style>
</style>